<template>
	<div class="my">
		<header>
      <Tab></Tab>
      
      <div class="user-info" v-if="loginStatus">
        <img :src="userInfo.imgUrl" alt="">
        <span>{{userInfo.inckName}}</span>
      </div>

      <div class="login" @click="goLogin" v-else>登录/注册</div>
    </header>

    <section>
        <ul>
          <li>地址管理</li>
          <li v-if="loginStatus" @click="LOGIN_OUT">退出登录</li>
        </ul>
    </section>

    <Tabbar></Tabbar>
	</div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'
import Tabbar from '@/components/common/Tabbar.vue'
import Tab from '@/components/common/Tab.vue'

export default {
  name: "My",
  components: {
    Tabbar,
    Tab
  },
  methods: {
    ...mapMutations(['LOGIN_OUT']),
    goLogin() {
      this.$router.push('/Login')
    }
  },
  computed: {
		...mapState({
      loginStatus:state=>state.user.loginStatus,
			userInfo:state=>state.user.userInfo
		})
	},
};
</script>

<style scoped>
  .my {
    display: felx;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    flex-direction: column;
  }
  header {
    width: 100%;
    height: 4.2rem;
    background-color: #b0352f;
    text-align: center;
  }
  header .login {
    color: #FFF;
    background-color: #F6AB32;
    border-radius: 6px;
    text-align: center;
    margin:.8rem 3rem 0;
    font-size: .6rem;
  }
  header .user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  header .user-info img {
    padding: .4rem 0 0 0;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
  }
  header .user-info span {
    padding: .4rem 0;
    font-size: 0.44rem;
    color: #FFF;
  }
  section {
    flex: 1;
    overflow: hidden;
  }
  section ul li {
    padding: 0.4rem;
    font-size: 0.5rem;
  }

  

</style>